<!-- 作者:高翔宇 时间:2024/6/2 周日 17:20 -->
<script setup lang="ts">
import TapBar from "@/views/layout/components/TapBar.vue";
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header height="4rem" style="box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); z-index: 999">
        <tap-bar/>
      </el-header>
      <el-container>
        <router-view/>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
/* 滚动条 */
/* 整体样式 */
::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
  height: 8px; /* 设置滚动条高度 */
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  background-color: #f2f2f2; /* 设置滚动槽的背景颜色 */
  border-radius: 10px; /* 设置滚动槽边框的圆角 */
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* 添加滚动槽内阴影效果 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #8ac6d1; /* 设置滚动条滑块的背景颜色为浅蓝色 */
  border-radius: 10px; /* 设置滚动条滑块的圆角 */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); /* 添加滚动条滑块阴影效果 */
  transition: background-color 0.3s, border-color 0.3s; /* 添加颜色变化的悬停动画效果 */
}

/* 滑块在鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #5b9aa0; /* 设置滚动条滑块鼠标悬停时的背景颜色 */
  border-color: #82abf8; /* 设置滚动条滑块鼠标悬停时的边框颜色 */
}
</style>

<style scoped lang="scss">
</style>
